<!DOCTYPE html>
<html lang="en">
<!----------------------------------
作者:laoWang--2020-6-24
@www.cqows.cn
----------------------------------->
<head>
    <meta charset="UTF-8">
    <title>模拟故障</title>
    <!--css引入代码-->
    <link rel="stylesheet" href="./Semantic-UI-CSS-master/semantic.css">
    <link rel="stylesheet" href="./bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="./elementui/index.css">
    <link rel="stylesheet" href="./css/index.css">
</head>

<body>
<div id="app">
    <!--故障页/返回/标题-->
    <nav class="ui inverted attached segment m-padded-tb-mini m-shadow-small" id="nav_header" style="height: 64px;position: fixed;top: 0px">

        <!--详情页返回-->
        <span style="float: left">
            <a href="car_index.html">
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<div class="el-icon-back"style="font-size: 35px;color: #1e77ba">返回</div>
</a>
</span>
        <div style="width: 50px"></div>
        <div class="ui container" style="background: #1B1C1D;float: left">
                <span>
                 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;  <img src="./img/LOGO.png" style="width: 70px;height: 45px;display: inline-block" alt="">
                    &nbsp;&nbsp;&nbsp;<font class="ui yellow header item" style="font-size: 30px">故障模拟考试中心</font>
                </span>

        </div>
        <span style="float: right;font-size: 15px; margin-top: 10px;color:#BDBDBD;">重庆奥维斯技术支持</span>
    </nav>
    <div style="height: 52px;">
    </div>
    <!--中间表格-->
    <table class="ui inverted table gradient" style="margin: 0px;border: 1px">
        <thead>
        <tr style="text-align:center;">
<!--            <th><font style="vertical-align: inherit;"><font style="vertical-align: inherit;font-size: 25px;top: 0px;">考试中心</font></font></th>-->
        </tr>
        </thead>
        <tbody>
            <tr v-for='(key,index) in items' class="tb_hover tr_change">
                <td :class='{checked:key.flag}' :class="{unchecked:tdColor,checked:!tdColor,checked:key.flag}" style="padding-left: 80px;font-size: 30px;color: #fbbd08;"><img
                        src="./img/guzhangpaichu.png" style="float: left " alt=""><font
                        style="vertical-align: inherit;"><font style="vertical-align: inherit">
                    <span class="font_fault" style="float: left" v-html="key.queName"></span>
                </font></font>
                    <input @click="select(key,index)" :checked="key.flag" :value="index"  type="checkbox" style="float: right;height: 40px;width: 25px; ">
                    <select style="width: 100px;border:none;background-color:rgba(0,0,0,0.0);position: absolute;right: 30%" name="断路" id="">
                        <option>断路</option>
                        <option disabled>短路 <i>(待开发)</i></option>
                        <option disabled>虚接 <i>(待开发)</i></option>
                    </select>
                </td>
            </tr>
            <tr style="height: 50px;width: 100%;background-color: black;"></tr>
            <tr style="height: 50px;width: 100%;background-color: black;position: fixed;bottom:0;">
                <td>
                <!--全选/不全选/反选/随机故障/设置故障-->
                    <el-pagination
                            prev-text="上一页"
                            next-text="下一页"
                            @current-change="handleCurrentChange"
                            :current-page="pagination.currentPage"
                            :page-size="pagination.pageSize"
                            :total="pagination.total"
                            layout="prev, pager, next"
                    >
                    </el-pagination>
                    <button @click="setBreakdown()" style="position:fixed;bottom: 5px;left: 93%" class="huge ui inverted green button"><font style="vertical-align: inherit;font-size: 15px">设置故障</font></button>
                    <i style="position:fixed;bottom: 5px;left: 91.5%;font-size: 18px;color: orange">/</i>
                    <button @click="checkedAll()" style="position:fixed;bottom: 5px;left: 78%" class="huge ui inverted teal button"><font style="vertical-align: inherit;font-size: 15px">全选</font></button>
                    <i style="position:fixed;bottom: 5px;left: 83.5%;font-size: 18px;color: orange">/</i>
                    <button @click="checkedNone()" style="position:fixed;bottom: 5px;left: 85%" class=" huge ui inverted yellow button"><font style="vertical-align: inherit;font-size: 15px">不全选</font></button>
                    <i style="position:fixed;bottom: 5px;left: 76.5%;font-size: 18px;color: orange">/</i>
                    <button @click="checkedAnti()" style="position:fixed;bottom: 5px;left: 71%" class=" huge ui inverted violet button"><font style="vertical-align: inherit;font-size: 15px">反选</font></button>
                    <i style="position:fixed;bottom: 5px;left: 69.8%;font-size: 18px;color: orange">/</i>
<!--                    <el-input v-model="suiJiGuzhang" style="width: 20px;height: 20px; position:fixed;bottom: 5px;left: 68%" placeholder="请输入随机个数"></el-input>-->
                    <button @click="randBreakdown()" style="position:fixed;bottom: 5px;left: 57.5%" class=" huge ui inverted button"><font style=" vertical-align: inherit;font-size: 15px">随机故障</font>
                        <input @change="changeSui($event)" class="ui input" :value="suiJiGuzhang" style="width: 25px;height: 15px">
                        </font>
                        <font style="margin-left: 3px; vertical-align: inherit;font-size: 15px">个</font>
                    </button>
                    <i style="position:fixed;bottom: 5px;left: 55.3%;font-size: 18px;color: orange ">/</i>
                    <button @click="reset()" style="position:fixed;bottom: 5px;left: 48%" class=" huge ui red inverted button"><font style="vertical-align: inherit;font-size: 15px">清除故障</font></button>
                </td>
            </tr>
        </tbody>
    </table>

</div>
</body>
<script src="js/vue.js"></script>
<script src="elementui/index.js"></script>
<script src="jquery/dist/jquery.js"></script>
<script src="Semantic-UI-CSS-master/semantic.js"></script>
<script src="js/axios-0.18.0.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            tdColor: true,
            number: 0,
            items:[],
            breakdowns: [],
            pagination:{
                currentPage: 1,
                pageSize: 10,
                total: 96
            },
            suiJiGuzhang: 4
        },
        methods: {
            changeSui(e){
                this.suiJiGuzhang = e.target.value;
            },
            /*渲染选中的表格*/
            select(key,index) {
                var flagg=false;
                if (!key.isChecked) {
                    key.flag = !key.flag;
                }
                this.breakdowns.forEach(i => {
                    if(i==index){
                        delete this.breakdowns[i]
                        flagg = true;
                    }
                })
                if (!flagg){
                   this.breakdowns.push(index)
                }
            },
            /*全选*/
            checkedAll() {
                let array = [];
                for (var i = 0; i < this.items.length; i++) {
                    array.push(i);
                }
                this.breakdowns = array;

                this.items.forEach(key => {
                    key.flag = true;
                })
            },
            /*不全选*/
            checkedNone() {
                this.items.forEach(key => {
                    key.flag = false;
                    this.breakdowns = [];
                });
            },
            /*反选*/
            checkedAnti() {
                /*大数组减去小数组*/
                function arrChange(a, b) {
                    for (var i = 0; i < b.length; i++) {
                        for (var j = 0; j < a.length; j++) {
                            if (a[j] == b[i]) {   //如果数组下标相同,则减去重复的值
                                a.splice(j, 1);
                                j = j - 1;  //防止数组越界
                            }
                        }
                    }
                    return a;
                }

                let array = [];

                for (var i = 0; i < this.items.length; i++) {
                    array.push(i);
                }

                this.breakdowns = arrChange(array, this.breakdowns)
                this.items.forEach(key => {
                    key.flag = !key.flag;
                });


            },
            /*设置故障*/
            setBreakdown() {
                const arr = []
                if (this.breakdowns.length > 0) {
                    this.breakdowns.forEach(i => {
                       arr.push(this.items[i].id)
                    })
                    console.log(arr)
                    axios.post("/fault",arr).then(() => {
                        this.$message.success("设置故障成功!")
                    });
                } else {
                    this.$message.error("你还没有设置任何故障!")
                }

            },
            /*随机故障*/
            randBreakdown() {
                var arrList=[0,1,2,3,4,5,6,7,8,9]
                this.breakdowns = [];
                this.items.forEach(key => {
                    key.flag = false;
                });

                function makeRandomArr(arrList,num){
                    if(num>arrList.length){
                        return;
                    }
//    var tempArr=arrList.concat();
                    var tempArr=arrList.slice(0);
                    var newArrList=[];
                    for(var i=0;i<num;i++){
                        var random=Math.floor(Math.random()*(tempArr.length-1));
                        var arr=tempArr[random];
                        tempArr.splice(random, 1);
                        newArrList.push(arr);
                    }
                    return newArrList;
                }

                var arrlist2= makeRandomArr(arrList,this.suiJiGuzhang);
                console.log(arrlist2)
                arrlist2.forEach(i => {
                    this.items[i].flag=true
                })
                this.breakdowns=arrlist2;

            },
            handleCurrentChange(currentPage) {
                this.pagination.currentPage = currentPage;
                this.findPage()
            },
            findPage() {
                this.items.forEach(key => {
                    key.flag = false;
                    this.breakdowns = [];
                });
                axios.get("/fault?currentPage=" + this.pagination.currentPage + "&pageSize=" + this.pagination.pageSize).then(res => {
                    this.items = res.data.records;
                    this.pagination.pageSize = res.data.size;
                    this.pagination.current = res.data.current;
                    this.pagination.total = res.data.total;
                });
            },
            reset () {
                this.items.forEach(key => {
                    key.flag = false;
                    this.breakdowns = [];
                });
                axios.post("/fault/reset").then(res => {
                    this.$message("重置成功！")
                })
            }
        },
        created() {
            axios.get("/fault?currentPage="+this.pagination.currentPage+"&pageSize="+this.pagination.pageSize).then(res=>{
                this.items = res.data.records;
                this.pagination.pageSize = res.data.size;
                this.pagination.current = res.data.current;
                this.pagination.total = res.data.total;
            })

        }
    })
</script>
</html>